<template>
  <div>
    cancer type:
    <el-select style="width: 200px" v-model="value" placeholder="请选择">
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      >
      </el-option>
    </el-select>
  </div>

  <div
    style="
      display: flex;
      justify-content: space-between;
      margin-top: 10px;
      background-color: rgb(232 232 232);
      height: 40px;
      padding: 0 10px;
      line-height: 40px;
    "
  >
    <span> lideney cancer</span>

    <div style="display: flex; align-items: center">
      <span style="margin-right: 10px"> Search</span>
      <el-input
        style="height: 30px"
        v-model="input"
        placeholder="请输入内容"
      ></el-input>
    </div>
  </div>
  <el-table :data="tableData" stripe style="width: 100%">
    <el-table-column prop="date" label="Metabolite" width="180">
      <template #default="scope">
        <i class="el-icon-time"></i>
        <span style="margin-left: 10px; color: #1160b6; cursor: pointer"
          >11-Dehydrocorticosterone (HMDB0004029) {{ scope.row.date }}
        </span>
      </template>
    </el-table-column>
    <el-table-column prop="name" label="Metabolismtype" width="180">
      <template #default="scope">
        <i class="el-icon-time"></i>
        <span style="margin-left: 10px; color: #1160b6; cursor: pointer"
          >Fatty Acid Metabolism
        </span>
      </template>
    </el-table-column>
    <el-table-column prop="address" label="UP/dowm">
      <template #default="scope">
        <i class="el-icon-time"></i>
        <span style="margin-left: 10px; color: #1160b6; cursor: pointer"
          >UP
        </span>
      </template>
    </el-table-column>
    <el-table-column prop="address" label="Source">
      <template #default="scope">
        <i class="el-icon-time"></i>
        <span style="margin-left: 10px; color: #1160b6; cursor: pointer"
          >experiment
        </span>
      </template>
    </el-table-column>
    <el-table-column prop="address" label="Benefit/Non-benefit">
      <template #default="scope">
        <i class="el-icon-time"></i>
        <span style="margin-left: 10px; color: #1160b6; cursor: pointer"
          >/Non-benefit
        </span>
      </template>
    </el-table-column>
    <el-table-column prop="address" label="Drug">
      <template #default="scope">
        <i class="el-icon-time"></i>
        <span style="margin-left: 10px; color: #1160b6; cursor: pointer"
          >degrasyn
        </span>
      </template>
    </el-table-column>
    <el-table-column prop="address" label="Drug">
      <template #default="scope">
        <i class="el-icon-time"></i>
        <span style="margin-left: 10px; color: #1160b6; cursor: pointer"
          >PMID
        </span>
      </template>
    </el-table-column>
  </el-table>
  <p style="margin-top: 30px; display: flex; justify-content: center">
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage4"
      :page-sizes="[100, 200, 300, 400]"
      :page-size="100"
      layout="total, sizes, prev, pager, next, jumper"
      :total="400"
    >
    </el-pagination>
  </p>
</template>

<script setup>
const tableData = [
  {
    date: "2016-05-02",
    name: "王小虎",
    address: "上海市普陀区金沙江路 1518 弄",
  },
  {
    date: "2016-05-04",
    name: "王小虎",
    address: "上海市普陀区金沙江路 1517 弄",
  },
  {
    date: "2016-05-01",
    name: "王小虎",
    address: "上海市普陀区金沙江路 1519 弄",
  },
  {
    date: "2016-05-03",
    name: "王小虎",
    address: "上海市普陀区金沙江路 1516 弄",
  },
];
</script>
